<div *ngIf="node?.name" class="label" title="{{node?.name}}">
    <ng-container *ngIf="node?.gate && !runActive">
        <div *ngIf="!node.runs" title="Job gate" class="gate">
            <span nz-icon nzType="caret-right" style="margin-left: 3px;" nzTheme="fill"></span>
        </div>
        <button *ngIf="node.gate.inputs && node.runs" nz-button nzGhost nzSize="small" nzShape="circle"
            title="Run job gate" (click)="clickGate($event)">
            <span nz-icon nzType="caret-right" style="margin-left: 2px;" nzTheme="fill"></span>
        </button>
        <button *ngIf="!node.gate.inputs && node.runs" nz-button nzGhost nzSize="small" nzShape="circle"
            title="Run job gate" nz-popconfirm nzPopconfirmTitle="Confirm run the job" nzPopconfirmPlacement="bottom"
            (nzOnConfirm)="confirmRunGate()" (click)="$event.preventDefault();$event.stopPropagation();">
            <span nz-icon nzType="caret-right" style="margin-left: 2px;" nzTheme="fill"></span>
        </button>
    </ng-container>
    <span class="name">{{node?.name}}</span>
</div>
<div class="node pointing">
    <div class="jobs">
        <div class="job" *ngFor="let key of keys" [class.highlight]="highlightKey === key && selectedKey !== key"
            [class.active]="selectedKey === key" (click)="onMouseClick(key)" (mouseenter)="onMouseEnter(key)"
            (mouseleave)="onMouseOut(key)" [class.success]="status[key] && status[key] === statusEnum.Success"
            [class.inactive]="status[key] && status[key] === statusEnum.Skipped"
            [class.fail]="status[key] && (status[key] === statusEnum.Fail || status[key] === statusEnum.Stopped)"
            [class.building]="status[key] && (status[key] === statusEnum.Building || status[key] === statusEnum.Waiting || status[key] === statusEnum.Scheduling)">
            <div *ngIf="status[key]" class="commands">
                <button *ngIf="(status[key] | isJobTerminated) && status[key] !== 'Skipped' && !runActive" nz-button
                    nzGhost (click)="clickRestart(key, $event)" nzShape="circle" title="Restart the job">
                    <span nz-icon style="font-size: 12px;">
                        <svg>
                            <path
                                d="M 758.2 839.1 C 851.8 765.9 912 651.9 912 523.9 C 912 303 733.5 124.3 512.6 124 C 291.4 123.7 112 302.8 112 523.9 c 0 125.2 57.5 236.9 147.6 310.2 c 3.5 2.8 8.6 2.2 11.4 -1.3 l 79 -93.8 c 2.7 -3.4 2.1 -8.3 -1.2 -11.1 c -8.1 -6.6 -15.9 -13.7 -23.4 -21.2 a 318.64 318.64 0 0 1 -68.6 -101.7 C 250 582 247 573 247 520 s 7 -62 23 -101 c 16 -38 35 -60 71 -97 c 47.4 -39.3 91 -64 171.4 -65.3 C 592 258 664 291 694 321 s 56 68 68 102 c 13 31 23 65 23 102 c -1 65 -12 125 -69 189 a 318.64 318.64 0 0 1 -33 26 L 636 680 a 8 8 0 0 0 -14.1 3 l -39.6 162.2 c -7.3 31.8 17.7 64.8 50.7 63.8 l 167 0.8 c 6.7 0 10.5 -7.7 6.3 -12.9 z">
                            </path>
                        </svg>
                    </span>
                </button>
                <button *ngIf="!(status[key] | isJobTerminated)" nz-button nzGhost nzSize="small"
                    (click)="clickStop(key, $event)" nzShape="circle" title="Stop the job">
                    <span nz-icon style="font-size: 8px;">
                        <svg>
                            <path d="M 960 64 H 64 v 896 h 896 z"></path>
                        </svg>
                    </span>
                </button>
            </div>


            <div *ngIf="displayNames[key]" class="name" title="{{displayNames[key]}} - {{key}}">
                {{displayNames[key]}}
            </div>

            <div class="infos">
                <div *ngIf="durations[key]" class="duration" nz-tooltip [nzTooltipTitle]="durationTooltip">
                    {{durations[key]}}
                    <ng-template #durationTooltip>
                        <div class="durationTooltip">
                            <div *ngIf="dates[key].queued"><b>Queued:</b>&nbsp;{{dates[key].queued | date: 'long'}}
                            </div>
                            <div *ngIf="dates[key].scheduled"><b>Scheduled:</b>&nbsp;{{dates[key].scheduled | date:
                                'long'}}
                            </div>
                            <div *ngIf="dates[key].started"><b>Started:</b>&nbsp;{{dates[key].started | date: 'long'}}
                            </div>
                            <div *ngIf="dates[key].ended"><b>Ended:</b>&nbsp;{{dates[key].ended | date: 'long'}}</div>
                        </div>
                    </ng-template>
                </div>
                <div *ngIf="status[key]" class="status">
                    {{status[key].toLowerCase()}}
                </div>
            </div>
        </div>
    </div>
</div>